<template>
  <div class='container'>
    <el-card>
      <!-- 头部筛选框 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="10">
          <el-form label-position="right" :model="form">
            <el-form-item label="关键字" label-width="80px">
              <el-input style="width: 240px" size="small" placeholder="根据编号搜索" v-model="form.keyword" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right;">
          <el-button size="small" @click="close">清除</el-button>
          <el-button type="primary" size="small" @click="filterList">搜索</el-button>
        </el-col>
      </el-row>
      <!-- alert提示框 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- 数据表格渲染 -->
      <el-table
        :data="list"
        style="width: 100%; margin-top: 10px">
        <el-table-column prop="id" label="编号" width="220" />
        <el-table-column prop="questionType" :formatter="formatter" label="题型" width="80" />
        <el-table-column label="题目编号" width="220">
          <template v-slot="{ row }">
            <div v-for="item in row.questionIDs" :key="item.number">
              <a href="#" @click.prevent="showDialog(item.id)" style="color: rgb(0, 153, 255)"> {{ item.number }} </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" />
        <el-table-column prop="totalSeconds" label="答题时间(s)" />
        <el-table-column prop="accuracyRate" label="正确率(%)" />
        <el-table-column prop="userName" label="录入人" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button @click="delList(row)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="form.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
          style="margin-top: 20px"
          background
        />
      </el-row>
    </el-card>
    <!-- 预览组件 -->
      <Preview v-if="isShowDialog" :isShowDialog.sync="isShowDialog" :currentId="currentId" />
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import Preview from '@/module-hmmm/components/questions-preview'
export default {
  name: 'randoms',
  // 预览组件
  components: {
    Preview
  },
  data () {
    return {
      list: [], // 题组列表
      total: 0, // 题组列表总数量
      form: {
        keyword: null,
        pagesize: 20,
        page: 1
      },
      questionsType: questionType,
      isShowDialog: false,
      currentId: 0
    }
  },
  methods: {
    // 获取题组列表
    async getList () {
      const { data } = await randoms(this.form)
      this.list = data.items
      this.total = data.counts
    },
    // 分页数量改动
    handleSizeChange (value) {
      this.form.pagesize = value
      this.form.page = 1
      this.getList()
    },
    // 当前页码改动
    handleCurrentChange (value) {
      this.form.page = value
      this.getList()
    },
    // 格式化题型
    formatter (row, column, cellValue, index) {
      return this.questionsType.find(item => item.value === +row.questionType).label
    },
    // 删除题型
    async delList (row) {
      try {
        await this.$confirm('你确定要删除吗？', '温馨提示', { type: 'warning' })
      } catch {
        return
      }
      await removeRandoms({ id: row.id })
      this.$message.success('删除成功')
      this.getList()
    },
    // 根据编号筛选
    async filterList () {
      this.form.page = 1
      this.getList()
    },
    // 预览弹窗关闭
    close () {
      this.form = {
        keyword: null,
        pagesize: 20,
        page: 1
      }
    },
    // 显示预览弹窗并且
    async showDialog (id) {
      this.isShowDialog = true
      this.currentId = id
    }
  },
  created () {
    // 页面一进来获取题组列表
    this.getList()
  }
}
</script>

<style scoped lang='scss'>
  .container {
    padding: 10px;
  }
</style>
